<template>
  <div class="container">
    <el-card class="box-card" shadow="always">
      <div slot="header" class="header">
        <el-button type="primary" @click="goBack" style="margin-right: 20px"
          >返回</el-button
        >

        <span>模型基本信息</span>
        <el-button @click="saveAll" style="margin-left: 20px" type="primary"
          >保存全部</el-button
        >
      </div>
      <div class="content">
        <div class="mx">
          设备名称：<span>{{ queryObj.deviceName }}</span>
        </div>
        <div class="mx">
          设备类型：<span>{{
            queryObj.deviceType == 1 ? "固化模型" : "可配置模型"
          }}</span>
        </div>
        <div class="mx">
          设备型号：<span>{{ queryObj.deviceNumber }}</span>
        </div>
        <div class="mx">
          设备ID：<span>{{ queryObj.deviceId }}</span>
        </div>
        <div class="mx">
          生产日期：<span>{{
            queryObj.manufactureTime | datefmt("YYYY-MM-DD")
          }}</span>
        </div>
      </div>
      <div class="content">
        <div class="mx-w">
          设备版本号：<span>{{ queryObj.deviceVersion }}</span>
        </div>
        <div class="mx-w">
          设备位置：
          <span>{{ queryObj.deviceOfRegionName }}</span>
          <el-button
            @click="changLacation"
            style="margin-left: 30px"
            type="primary"
            >选择位置</el-button
          >
        </div>
      </div>
    </el-card>
    <el-card class="box-card" shadow="always">
      <div slot="header" class="header">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="模型参数" name="one">
            <global-card>
              <template #leftTitle>
                <el-button
                  type="success"
                  icon="el-icon-refresh"
                  @click="refresh"
                  >刷新</el-button
                >
                <!-- <el-button
                  type="primary"
                  icon="el-icon-refresh"
                  @click="saveParams"
                  >保存</el-button
                > -->
              </template>
              <template #content>
                <el-table
                  v-loading="loading"
                  :data="tableData"
                  border
                  style="width: 100%"
                  class="elTable"
                  ref="tableRef"
                >
                  <el-table-column
                    type="index"
                    label="序号"
                    width="80"
                    align="center"
                  />
                  <el-table-column
                    prop="parameterName"
                    label="参数名称"
                    align="center"
                  />

                  <el-table-column
                    prop="parameterCode"
                    label="参数代码"
                    align="center"
                  />

                  <el-table-column
                    prop="subTypeName"
                    label="参数类型"
                    align="center"
                  >
                    <!-- <template #default="{ row }">
                      <el-input
                        type="input"
                        placeholder="请输入参数值"
                        v-model="row.messages"
                      />
                    </template> -->
                  </el-table-column>
                  <!-- <el-table-column label="操作" width="300" align="center">
                    <template #default="{ row }">
                      <el-button
                        type="warning"
                        size="mini"
                        @click="handlerEdit(row)"
                        >编辑</el-button
                      >
                      <el-button
                        type="danger"
                        size="mini"
                        @click="handlerDelete(row)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column> -->
                </el-table>
              </template>
              <template #footer>
                <pagination
                  class="pagination"
                  :total="count"
                  :page.sync="pageIndex"
                  :limit.sync="pageSize"
                  @pagination="pagination"
                />
              </template>
            </global-card>
          </el-tab-pane>
          <el-tab-pane label="订阅规则" name="two">
            <global-card>
              <template #leftTitle>
                <el-button
                  type="success"
                  icon="el-icon-refresh"
                  @click="refresh"
                  >刷新</el-button
                >
                <!-- <el-button
                  type="primary"
                  icon="el-icon-refresh"
                  @click="saveParams"
                  >保存</el-button
                > -->
              </template>
              <template #content>
                <el-table
                  v-loading="loading"
                  :data="tableData1"
                  border
                  style="width: 100%"
                  class="elTable"
                  ref="tableRef"
                >
                  <el-table-column
                    type="index"
                    label="序号"
                    width="80"
                    align="center"
                  />
                  <el-table-column
                    prop="configName"
                    label="数据获取规则名称"
                    align="center"
                  />

                  <el-table-column
                    prop="subTypeName"
                    label="主题类型"
                    align="center"
                  />

                  <el-table-column prop="waitTime" label="心跳" align="center">
                    <template #default="{ row }">
                      <el-input
                        :disabled="row.status == 'OFF'"
                        @blur="updateStatus(row)"
                        type="input"
                        placeholder="请输入心跳值"
                        v-model="row.waitTime"
                      />
                    </template>
                  </el-table-column>

                  <el-table-column label="状态" width="300" align="center">
                    <template slot-scope="scope">
                      <el-switch
                        @change="updateStatus(scope.row)"
                        active-value="ON"
                        inactive-value="OFF"
                        active-text="开"
                        inactive-text="关"
                        v-model="scope.row.isUse"
                        :disabled="
                          !(
                            scope.row.subType == 'SX_CD' ||
                            scope.row.subType == 'SX_ED'
                          )
                        "
                      >
                      </el-switch>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
              <!-- <template #footer>
                <pagination
                  class="pagination"
                  :total="count"
                  :page.sync="pageIndex"
                  :limit.sync="pageSize"
                  @pagination="pagination"
                />
              </template> -->
            </global-card>
          </el-tab-pane>
        </el-tabs>
      </div>

      <global-message
        v-if="isGlobalMessageShow"
        @receive="receive"
        :message="message"
      />
    </el-card>
    <yc-dialog ref="ycDialog" centerTitle="位置信息">
      <template #content>
        <el-table
          v-loading="loading"
          :data="tableData2"
          style="width: 100%"
          class="elTable"
          ref="tableRef"
          border
          row-key="id"
          :tree-props="{ children: 'bZoneList' }"
        >
          <el-table-column prop="zoneName" label="区域名称" align="center" />
          <el-table-column prop="zoneLevel" label="级别" align="center" />
          <el-table-column prop="remake" label="备注" align="center" />
          <el-table-column label="操作" width="400" align="center">
            <template #default="{ row }">
              <el-button type="primary" size="mini" @click="changeRow(row)"
                >选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </yc-dialog>
  </div>
</template>
<script>
import { selectLevelZone } from "@/api/regionManage/index"
import {
  queryParametersPageByDevice,
  updateDevice,
  deactivateConfigMain,
  queryPageDeviceConfigMain
} from "@/api/device/index"
import ycDialog from "@/components/pageDialog"
export default {
  data() {
    return {
      tableData: [],
      tableData2: [],
      tableData1: [],
      searchForm: {},
      count: 0,
      isGlobalMessageShow: false,
      message: "",
      pageIndex: 1,
      pageSize: 20,
      loading: false,
      queryObj: {},
      activeName: "one"
    }
  },
  components: {
    ycDialog
  },
  created() {
    this.queryObj = this.$route.query
    this.getData()
    this.queryParametersPageByDevice()
    this.queryPageDeviceConfigMain()
  },
  methods: {
    async updateStatus(row) {
      console.log(row, "row3333")
      let params = {
        configCode: row.configCode,
        deviceCode: row.deviceCode,
        subType: row.subType,
        isUse: row.isUse,
        waitTime: row.waitTime,
        id: row.id
      }
      const { status } = await deactivateConfigMain(params)
      this.isGlobalMessageShow = true
      if (status == 200) {
        this.message = "success"
      } else {
        this.message = "error"
      }
    },
    async queryPageDeviceConfigMain() {
      this.loading = true
      const data = await queryPageDeviceConfigMain({
        deviceCode: this.$route.query.deviceCode,
        pageIndex: 1,
        pageSize: 100
      })
      this.tableData1 = data.object.data
      const typeData = [
        {
          label: "设备基础数据",
          value: "SX_FD"
        },
        {
          label: "实时数据",
          value: "SX_CD"
        },
        {
          label: "异常数据",
          value: "SX_ED"
        },
        {
          label: "状态数据",
          value: "SX_SD"
        },
        {
          label: "更改设备开关",
          value: "XX_OF"
        },
        {
          label: "更改设备参数值",
          value: "XX_CD"
        }
      ]
      this.tableData1.forEach((e, i) => {
        typeData.forEach((v, m) => {
          if (e.subType == v.value) {
            e.subTypeName = v.label
          }
        })
      })
      this.loading = false
    },
    async saveAll() {
      let str = ""
      this.tableData.forEach((e) => {
        str += e.parameterCode + "&" + e.messages + "_"
      })
      const { status } = await updateDevice({
        id: this.$route.query.id,
        deviceCode: this.$route.query.deviceCode,
        deviceOfRegion: this.queryObj.deviceOfRegion,
        deviceOfRegionName: this.queryObj.deviceOfRegionName,
        messages: str.substring(0, str.length - 1)
      })
      if (status == 200) {
        this.$router.go(-1)
      }
    },
    async getData() {
      const data = await selectLevelZone()
      this.tableData2 = data.object
    },
    changeRow(row) {
      console.log(row, "row")
      this.queryObj.deviceOfRegion = row.zoneCode
      this.queryObj.deviceOfRegionName = row.zoneName
      this.$refs.ycDialog.dialogVisible = false
      // console.log();
    },
    changLacation() {
      this.$refs.ycDialog.dialogVisible = true
    },
    saveParams() {},

    async queryParametersPageByDevice() {
      this.loading = true
      const data = await queryParametersPageByDevice({
        pageIndex: 1,
        pageSize: 100,
        modelCode: this.$route.query.modelCode,
        deviceType: "0"
      })
      this.tableData = data.object.data
      const typeData = [
        {
          label: "参数数值",
          value: "0"
        },
        {
          label: "参数状态",
          value: "1"
        },
        {
          label: "枚举",
          value: "2"
        }
      ]
      this.tableData.forEach((e, i) => {
        typeData.forEach((v, m) => {
          if (e.parameterType == v.value) {
            e.subTypeName = v.label
          }
        })
      })
      this.loading = false
      console.log(data, "data")
    },
    handleClick() {},
    goBack() {
      this.$router.go(-1)
    },

    receive() {
      this.isGlobalMessageShow = false
    },

    pagination(pageItem) {
      this.getData(pageItem.page, pageItem.limit)
    },
    refresh() {
      this.queryPageDeviceConfigMain()
      this.queryParametersPageByDevice()
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .box-card {
    // box-shadow: 10px 0px 8px rgba(0, 0, 0, 0.9);
    margin-bottom: 20px;
    .header {
      span {
        font-weight: 800;
        font-size: 20px;
      }
    }
    .content {
      display: flex;
      padding: 0 20px;
      .mx {
        flex: 1;
        font-weight: 600;
        font-size: 18px;
        padding: 30px 0;
        span {
          font-weight: 400;
        }
      }
      .mx-w {
        font-weight: 600;
        font-size: 18px;
        padding: 30px 0;
        span {
          font-weight: 400;
        }
        &:last-child {
          margin-left: 173px;
        }
      }
    }
    .mx-ms {
      padding: 0 20px;
      font-weight: 600;
      font-size: 18px;
      span {
        font-weight: 400;
      }
    }
    .title-container {
      display: flex;
      justify-content: flex-end;
      margin-right: 20px;

      .left-box {
        display: flex;

        .formClass {
          display: flex;
          margin-right: 20px;
          .el-form-item {
            margin-top: 20px;
            margin-bottom: 0;
            .el-input {
              width: 216px;
            }
            .el-select {
              width: 171px;
              margin-left: 10px;
            }
            .el-date-editor {
              width: 336px;
              margin-left: 10px;
            }
          }
        }
        .el-button {
          // width: 42px;
          height: 36px;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
